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This tutorial will provide step-by-step instructions to help you develop a business 
process application and then use Business Space powered by WebSphere® V7 to 
frontend this application in managing and executing the process. The demo 
application will show a scenario involving a human workflow. The tutorial will help you 
develop Service Component Architecture (SCA) artifacts in WebSphere Integration 
Developer V7.0 and Business Space V7.0. The latter part of the tutorial will discuss 
creating a custom business space to implement the workflow. 


Section 1. Introduction 


Business Space powered by WebSphere (hereafter called Business Space) 
empowers business users with a single unified user interface that collaborates 
between the products in the WebSphere Business Process Management portfolio. 
Business Spaces are Web 2.0 based drag and drop user interface and enables 
users to create mashups of widgets spread across several spaces or pages within a 
single space. 

To learn more about Business Space, see the Business Space overview topic in the 
Information Center. 
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In this tutorial 

In this tutorial, the use of Business Space as a front end for a business process 
application is illustrated. A custom Business Space is created and customized to 
interact with the WebSphere Process Server runtime to manipulate and work on the 
business process. 

The tutorial illustrates Business Space functionality through a fictitious company 
called the “The dW Resort”, which has a company policy of allowing discounted 
rates to returning customers who have had previous booking history of twenty or 
more. For customers with lower than twenty previous bookings, the Resort 
management will determine the applicability of the discounted rates. 

Business rules are used for the automatic application of discounted rates for eligible 
customers and a human task will implement the process of manually checking the 
eligibility of the discounted rates. 

The tutorial is divided into the following sections: 

• Developing the business process application 

• Developing the Business Space 

• Running the application from Business Space 


Prerequisites 


• Previous development experience in WebSphere Integration Developer. 

• Knowledge of basic administration of WebSphere Process Server. 


System requirements 


• Microsoft® Windows® XP Professional Desktop with at least 2 GB of 
RAM 

• IBM® WebSphere Integration Developer V7.0.0.1 with WebSphere 
Process Server Test Environment V7.0.0.1 


Duration 

2 hours 
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Section 2. Developing the business process application 


In this section, you will develop the business process application to be used with 
Business Space. Open the Business Integration perspective, create a new project, 
and name it dWResortveri. A sample Project Interchange file, dWResortVerl .zip, 
is provided for you to download with this tutorial. 

You will develop a business process called DiscountEligibility, which will have an 
invoke activity called AutoApproveDiscount. This activity will invoke a business rule 
to validate whether the customer has done previous bookings of more than twenty to 
automatically apply the discounted rates while booking. Otherwise, a human task 
called DiscountEligibilityTask\N\W be executed, where the user has to manually 
approve or reject the discounted rates. 

The business rule discountRule will apply the logic of approving the discounted rate 
automatically if the previous booking is greater than twenty. The completed process 
will appear similar to Figure 1. 


Figure 1. DiscountEligibility business process 
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In the following sections, you will learn the development steps. 
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Creating the business process 


1. Create a business object called Biliinginfo with fields as shown i 
Figure 2. 

Figure 2. Biliinginfo business object 
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2. Save the business object. 

3. Create an Interface called discountEligibility, which will have a 
request-response operation as shown in Figure 3. 

Figure 3. discountEligibility interface 
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4. Open the Assembly Diagram. 

5. Drag a Process component from the Component panel and drop it in the 

Assembly Diagram. 

6. Change the Name and Display Name of the component to 
DiscountEiigibility in the Properties tab. Add Description as 
Start dWResort Task as shown in Figure 4. 

Figure 4. DiscountEiigibility process 
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7. Add the discountEligibility interface to the DiscountEiigibility 

component. 

8. Create an implementation of DiscountEiigibility. 

9. Ensure that the business process type is a Long-running process as 
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10. 


shown in Figure 5. 

Figure 5. DiscountEligibility process is long running 
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Change the Name and Display Name of the Receive activity to 
StartEligibilityCheck as shown in Figure 6. 

Figure 6. Rename Receive activity to StartEligibilityCheck 
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11 . Add a new variable, ApprovalResult. Leave the data type to default as 
shown in Figure 7. 

Figure 7. Add a new variable - ApprovalResult 
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1 2. Add an Invoke activity from the Basic Actions panel and place it 
between the StartEligibilityCheck and Reply activities. 

13. Change the Name and Display Name to AutoApproveDiscount as 
shown in Figure 8. 

Figure 8. Rename invoke activity to AutoApproveDiscount 
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Invoke - AutoApproveDiscount 
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1 4. Go to the Details tab of the component’s properties and add 

discountEligiblity to the interface. Set the Inputs and Outputs 
parameters as shown in Figure 9. 

Figure 9. Add interface to AutoApproveDiscount 
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1 5. Go back to the Assembly Diagram. Add a Choice component from the 
Structures panel after the AutoApproveDiscount activity. 


1 6. Click the Case - Yes element and change the Display name to Approve 
in the Properties tab as shown in Figure 10. 

Figure 10. Choice - Case Approve 
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17. In the Details tab, choose Java as the Expression Language, and 

Expression Type as Visual. Add the expression as shown in Figure 11. 

Figure 11. Choice - Case Approve expression 
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Case - Approve 
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1 8. Add an Assign component from the Basic Actions panel below Approve 
and modify the Details tab as shown in Figure 12. 

Figure 12. Add an Assign to Case Approve 
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1 9. Right click the Choice activity and add an Otherwise element. 

20. Add a Human Task from the Human Workflow panel to the Otherwise 
element. 


21. Add discountEligiblity to the interface of the human task and set the 
Inputs and Outputs parameter as shown in Figure 13. 

Figure 13. Add an interface to the human task 
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22. Change the “Name” and “Display Name” fields of the Human Task to 
DiscountEiigibilityTask as shown in Figure 14. 

Figure 14. Rename the Human Task to DiscountEiigibilityTask 
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23. Open the DiscountEiigibilityTask in the Human Task editor. 


24. Go to the Details tab and check Give owner read access to 

surrounding process context data so that the owner of the task can 
use the Human Workflow Diagram widget and see the business process 
structure and status in the Business Space console, as shown in Figure 
15. 

Figure 15. Edit the DiscountEiigibilityTask details 
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25. Use the defaults for the other values. Save the changes and close the 
Human Task editor. 


26. Go back to the DiscountEligibility process and click StartEligibilityCheck 
to display the activity properties. 

27. Go the Authorization tab and click New to create a new invocation task. 
An invocation task is required to start the business process from the 
Business Space. The Business Space will display StartEligiblityCheck 
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and its description in the list of available tasks as shown in Figure 16. 

Figure 16. Edit authorization for StartEligiblityCheck 
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28. Save the business process and the Assembly Diagram. 


Creating the business rule 


1 . Navigate to the Assembly Diagram. Drag a Rule Group component 
from the Components panel and drop it on the Assembly Diagram. 

2. Enter AutoDiscountApproval as the name of the Rule Group as 
shown in Figure 17. 

Figure 17. AutoDiscountApproval rule group 


AutoDiscountApproval 


3. Double-click the AutoDiscountApproval component to generate an 
implementation for the rule group. The rule group editor opens up. 

4. Click Enter Rule Logic and select New rule set as shown in Figure 18. 

Figure 18. AutoDiscountApproval rule group editor 
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5. Navigate to the Rule set editor. 

6. Enter discountRule for the Name of the business rule as shown in 
Figure 19. 

Figure 19. Rule set editor 
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7. Add an In-Then template and name it RuieTempiate. 

8. Refer to Figure 20 to complete the template. 

Figure 20. Creating the RuieTempiate 
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▼Templates |gj ^ 


Name 

RuleTemplate 
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Parameters 
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int 
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If 
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Then 
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9. Add an Action rule and name it Rule. 

10. Refer to Figure 21 to complete the rule. 

Figure 21. Creating the action Rule 
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11. Add a Template rule and name it ApprovaiRuie. 

12. Refer to Figure 22 to complete ApprovaiRuie. 

Figure 22. Creating the template ApprovaiRuie 
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Template 
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13. Save the Rule editor and rule group. 

Complete the assembly diagram 


1 . Wire the DiscountEligibility component to the AutoDiscountApproval 
component as shown in Figure 23. 

Figure 23. Wiring the components 
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2. Click OK if you are asked to create a matching interface on the target 
component. 

3. Save the Assembly Diagram and ensure that there are no build errors. 

Generate human task user interfaces for Business Space 


i. 


You will use Dojo/HTML pages to display human task forms. To create 
the forms, right-click the module and choose Generate Human Task 
User Interface as shown in Figure 24. 

Figure 24. Generate a human task user interface 
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2. In the pop-up panel, the generator type is HTML-Dojo pages or Lotus 
Forms for Business Space as shown in Figure 25. 

Figure 25. Select a generator type 
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3. Ensure that all the relevant human tasks are selected and click Next. 


4. Select HTML for the human task display and click the Browse button. 

5. Choose dWResortVerlWeb/WebContent and click OK as shown in 
Figure 26. 

Figure 26. Choose the Web project to generate user interfaces 
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6. A message pops up indicating that the interface has been generated. 
Click OK. 


7. Open the Web perspective in WebSphere Integration Developer and 
navigate to dWResortVerlWeb/WebContent. 

8. You will notice that the HTML pages are created for the human task and 
the invoke activities. 
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9. 


You can edit the HTML pages to modify the forms as shown in Figure 27 
and Figure 28. However, this is not discussed in the tutorial. 

Figure 27. Modified form for StartEligibilityCheck.html 

The dW Resort £3 


B 




D: \IBM\WID7\workspace 1 \dWResortVer 1 Web\WebContent\5tartEli( 


Invoice Details 


Last Name 
First Name 
Address 

Contact Number 
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Discount Approval Details 

Discount Approved * 

Figure 28. Modified form for StartEligibilityCheck.html 
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■;j The dW Resort 
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Last Name: 

First Name: 
Address: 

Contact Number: 
Email ID: 
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Click checkbox to 
approve discounted 
rate: ’ 

10. Save the workspace. 


Deploy the module 


1. Start WebSphere Process Server Test Environment, if not already 
started. 

2. Deploy the dWResortVerl module and ensure that there are no errors 
during deployment. 
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Section 3. Developing the Business Space 

In this section, you will use the Business Space console to create a new custom 
Business Space that you can use to interact with the business process application 
created in the previous steps. Using the space, a new task instance of 
DiscountEligibility \s created and the forms are presented to Business Space users 
to enter guest information and previous booking details. The task instance will be 
available to be accepted and worked upon if the previous bookings are less than 20. 
The task will be completed automatically if the bookings are more than 20. 

WebSphere Process Server V7 provides a built-in template called Advanced 
Managing of Human tasks and Workflow. 

However, you will create a blank template and pick and choose some of the specific 
widgets required to manage business process and human tasks. You will also make 
use of some generic widgets as well as the built-in business rules widget. 


Prerequisite tasks 

There is a prerequisite task for the Document viewer widget. You are using a custom 
Microsoft Word document in the tutorial, and therefore, this document has to be 
available to the runtime before you use Business Space. 


1. Create a new Microsoft Word document and name it 
DiscountGuideiines. doc. You can optionally add some text on the 
first page. 

2. Save or copy the file over to: 

[WID_Test_Environment_Root]\runtimes\bi_v7\profiles\[profileName]\ 
installedApps\[cellName]\BSpaceEAR_<nodeName>_<serverName>.ear\ 

BSpace.war\iWidget\widgets\htmlFragment\sampleDocs 


in the WebSphere Process Server V7 profile root directory in the Test 
Environment. 

3. Upon the next restart, the file will be available for Business Space. 

Create the business space 


Using Business Space to manage business process applications 
© Copyright IBM Corporation 2010. All rights reserved. 


Trademarks 
Page 17 of 39 


developerWorks® 


ibm.com/developerWorks 


1. Access the Business Space console. It is accessible at 

http : //<host> : <port>/BusinessSpace, where host is the host 
name of the machine where Test Server is running, and port is the 
HTTP port where the Test Server is listening on. 

2. The default Business Space V7 login screen appears. You have the 
flexibility to customize the login screen, which is described in Customizing 
the login page. The customized screen looks similar to Figure 29. 

Figure 29. Customized Business Space login screen 



3. Login to the Business Space with the username of admin and password 

of admin. 

4. You will be presented with the Getting Started screen as shown in Figure 
30. 

Figure 30. Getting Started page 
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Welcome to Business Space 


Getting Started ▼ 



Start » 


Learn » 


Read the documentation 


5. Choose Actions > Create Space from the menu bar as shown in Figure 


31. 

Figure 31. Create the Space option 
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6. You will be presented with the Create Space panel as shown in Figure 
32. 

Figure 32. Create the Space panel 
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7. Complete the Create Space panel: 

a. Enter a name for the space. 

b. Enter a space description (optional). 

c. Choose a preferred space style and icon. 

d. Select Create a new space using a template choose None. 

e. Click the Save button. 

8. Use the Create page button and create three pages for the space, as 
shown in Figure 33. 

Figure 33. Add a page to space 



a. Enter the page name. 

b. Enter a page description. 

c. Select Create an empty page as shown in Figure 34. 

Figure 34. Create the Page panel 
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Create Page x 

* Page name: 

Page description: 


0 Create an empty page 
O Create a page by duplicating another page 


OK 


Cancel 


9. 


The space will appear as shown in Figure 35. 

Figure 35. Business Space skeleton 
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Customize the Business Space pages 

Next, you will edit the pages one-by-one and add necessary widgets to the page and 
arrange them appropriately. The first page will have generic widgets, the second 
page will have human task widgets, and the third page will have business rules 
widgets. To customize each page: 
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1. Click on the first page. 

2. Click Edit Page as shown in Figure 36. 

Figure 36. Edit the Page option 



3. The widget panel will be displayed as shown in Figure 37. 

Figure 37. Widget panel 



4. Click the drop down menu besides the page title and choose Layout. 
Choose a layout pattern of your choice (Figure 38). 

Figure 38. Edit the page layout settings 



5. After choosing a layout, go to the Widget panel. 

6. Click All Widgets. 

7. Place your mouse on the Google® Gadgets widgets as shown in Figure 
39, and drag it to one of the frames in the page. 

Figure 39. Google Gadgets widget 
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8. Add a calendar widget from Google. 

9. Click the drop down menu in the widget title and rename the title to 
Calendar. You will also have the options to edit the widget settings, size, 
and borders, as shown in Figure 40. 

Figure 40. Edit page settings for the first page 
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1 0. Return to the widget panel and select the Document widget as shown in 
Figure 41, and drag it to one of the empty frames. 

Figure 41. Document widget 



11. By default, the Business Space will display a sample Word document in 
the widget. You can override this by editing the widget settings as shown 
in Figure 42. In the “Type the URL” field, enter: 

/BusinessSpace/iWidget/widgets/htmlFragment/samp1eDocs/DiscountGu 

Figure 42. Enter Document viewer widget URL 
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12 . 


You will rename the widget title to Discount Guidelines V3.2, 
assuming that the widgets will display the discount guidelines to the 
space user for reference while approving the discounted rates manually, 
and that the document is at Version 3.2. See Figure 43. 

Figure 43. Rename Document viewer widget title 
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13. To complete the first page, you will add another widget, the Web Feed to 
display a Web feed on Hospitality Trends. As with the other widgets, drag 
the Web Feed widget, as shown in Figure 44, to the page. 

Figure 44. Web feed widget 



14. Rename it if you wish. Edit the settings to enter the feed URL. For this 
tutorial, enter 

http://feeds2.feedburner.com/HospitalityTrends. You can 

also customize the feed display from the settings panel as shown in 
Figure 45. 

Figure 45. Web feed widget settings 
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My Feeds Edit 

Feed 

Feed URL: 

Title: 

Items to display: 


http://feeds2.feedburner.com/HospitalityTr 


RSS - Hospitality Trends 


□ Make article links available to otherwidgets 

□ Open links directly onto site 
0 Show more details 

Style 

Advanced ^ 




Cancel 


Save 




1 5. Once finished with the customization, click the Save button and click 
Finish Editing as shown in Figure 46. 

Figure 46. Finish the page editing option 



1 6. Edit the second page. As with the previous page, click Edit Page so that 
the widget panel is displayed. 

17. You can select Human Task Management in the widget panel, as shown 
in Figure 47, to display only the specific widgets you require for the page. 

Figure 47. Human Task Management widgets 
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Human Task Management [9) v 


* 



18. One by one, drag and drop Task Definitions List, Tasks List, Task 
Information, and Human Workflow Diagram widgets to the page. 

19. Click the Save button and click Finish Editing. 

20. Edit the third page by following the steps carried out for the previous 
pages and drag and drop the Business Rules widget to the page as 
shown in Figure 48. 

Figure 48. Business Rules widget 



21. You see the discountRule rule displayed. 

22. Click the Save button and click Finish Editing. 

Complete the Business Space creation 

You are done with the space creation. Now you will see how to interact with the 
business process using the custom space created. Before that, you will verify 
whether the space is rendered properly: 

1. Logout from the Business Space console. 

2. Log back in to the Business Space and see whether the space renders 
properly similar to Figure 49. 

Figure 49. Business Space - dW Space 1 
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Section 4. Running the application from Business Space 

You will now use the custom space to test the business process application. 


Scenario: Verify the auto approval business rule 

In this scenario, you will add a customer who has made more than 20 previous 
bookings. The business rule logic automatically completes the task by approving 
discounted rates. To run the scenario: 


1. Login into the Business Space console. 

2. Navigate to the custom space dW Space 1. 

3. You will be presented the first page where you can see the calendar, the 
Web feed, and the document widgets. 

4. Navigate to the second page in dW Space 1. 

5. Go to the Task Definitions List widget as shown in Figure 50. 

Figure 50. Task Definitions List widget 
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Task Definitions List 

All - Create tasks and services ▼ 

Name 0 

Description 

Business category 

Approval 

... requests your approval 


Inquiry 

... sends the following inquiry:... 


Review 

... requests your review 


StartEligibilityCheck Start dWResortTask 


To-do 

... gives you a to-do:... 



6. Check StartEligibilityCheck and choose Actions > Create as shown in 
Figure 51. 

Figure 51. Create the Task instance 


▼ i _n 


Actions v 


Create 
^ Open 




7. Go to the Task Information widget. Here, you will see the input form is 
displayed as shown in Figure 52. 

Figure 52. Task Information widget displays input form 
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Task Information 


Submit 


Save as Draft 


StartEligibilityCheck x 

* Priority 
Due date 


5 


Invoice Details 

Last Name 

First Name 

Address 

Contact Number 

Email ID 

Previous Bookings 


8. Fill in the form and enter 30 for the “Previous Bookings” field. 

9. Click the Submit button. 

10. Go to the Task Lists widget and from the drop down menu, choose 
Check status of tasks as shown in Figure 53. 

Figure 53. Task List widget displays tasks 


Using Business Space to manage business process applications 
© Copyright IBM Corporation 2010. All rights reserved. 


Trademarks 
Page 29 of 39 



















developerWorks® 


ibm.com/developerWorks 


Tasks List 

All - Check status of tasks ▼ 

_J Name Description Owner 

_| StartEligibilityCheck 

11. You will get the details of the StartEligibilityCheck instance that you 
created previously. Note that the task status is “Completed”. 

12. Check the task and click Actions > Open as shown in Figure 54. 

Figure 54. Open a task instance 



13. Go to the Task Information widget again. This time the output form will 
be displayed. Note that Discount Approved is checked, indicating that 
the business rule logic has approved the disount as shown in Figure 55. 

Figure 55. Task output form 
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Task Information 


StartEligibilityCheck x 

Invoice Details 

Last Name 

First Name 

Address 

Contact Number 

Email ID 

Previous Bookings 



Discount Approval Details 

Discount Approved * P 

14. Go back to the Task Lists and delete the instance using Actions > 
Delete. 


Scenario: Verify the manual approval human task 

In this scenario, you will verify the manual discount approval process using the 
human task. To run the scenario: 


1. Go to the Task Definitions List widget. 
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2. Check StartEligibilityCheck and choose Actions > Create. 

3. Go to the Task Information widget. Here, you will see that the input form 
is displayed. 

4. Fill in the form and enter 10 for the “Previous Bookings” field. 

5. Click the Submit button. 

6. Go to the Task Lists widget and from the drop down menu, choose 
Assess available tasks as shown in Figure 56. 

Figure 56. Assess available tasks 

Tasks List 

All - Work on tasks ▼ 

Work on tasks ; 

j □ Name De; Assess available tasks Di 

Check status of tasks 

No tasks were fountr- 


7. You will notice an entry for the DiscountEligibility task in the Available 
status as shown in Figure 57. 

Figure 57. Available tasks list 


Tasks List 

AJI - Assess available tasks ▼ 



Name Description 

DiscountEligibility 

Owner 

Due time 


8. Check DiscountEligibility and click Actions > Accept to work on task 
instance as shown in Figure 58. 

Figure 58. Accept available tasks 
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Actions v 


0 Open 
Accept 


9. Go to the Human Workflow Diagram widget now. You will see the 

workflow diagram displayed indicating the flow from StartEligibilityCheck 
to DiscountEligibility human task, as shown in Figure 59. Move the mouse 
over the tasks to see the status details. 

Figure 59. Human Workflow Diagram widget 

Human Workflow Diagram 



10. Go to the Task Information widget. You will see that the task input form 
is displayed for DiscountEligibility as shown in Figure 60. 

Figure 60. Task input form for manual approval 


Using Business Space to manage business process applications 
© Copyright IBM Corporation 2010. All rights reserved. 


Trademarks 
Page 33 of 39 






















developerWorks® 


ibm.com/developerWorks 


Enter Guest Information: 


Last Name: 

First Name: 

Address: 

Contact Number: 

Email ID: 

Previous bookings: 



Click checkbox to approve 
discounted rate: * I” 

11. Since the previous booking is low, you will disapprove the discounts. 
Leave the checkbox to approve discounted rates as unchecked. 

1 2. Click the Submit button. 

1 3. Go to the Task Lists widget and from the drop down menu, choose 
Check status of tasks. You can refer to Figure 56. 

14. You will get the details of the StartEligibilityCheck instance that you 
created. Note that the task status is “Completed”. 

1 5. Open the task to view details using Actions > Open. 

1 6. The output form will be displayed in the Task Information widget as 
shown in Figure 61. 

Figure 61. Task output form for manual approval 
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Task Information 


StartEligibilityCheck x 


Last Name 

First Name 

Address 

Contact Number 

Email ID 

Previous Bookings 


Doe 


John 


IBM US 


123 - 456-7890 


johndoe@us.ibm.com 


10 


Discount Approval Details 


Discount Approved 


17. Go back to the Task Lists and delete the instance using Actions > 
Delete. 


Scenario: Modify the rule logic using Business Space 

In this scenario, you will use the Business Rules widget to change the rule logic. You 
will reduce the previous booking criteria to 15 and allow discounts to all guests who 
have done previous bookings of more than 15. 

1. Navigate to the third page in dW Space 1. 
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2. You will see the DiscountRule rule displayed inside the Business Rules 
widget as shown in Figure 62. 

Figure 62. Business Rule widget showing DiscountRule 

Business Rules 



3. Click DiscountRule to open up the rule editor. 

4. Place the mouse over the variable and left click to edit the value. 


5. 


Enter 15 and click outside the variable field as shown in Figure 63. 

Figure 63. Edit Business DiscountRule 


Save 


Reset 


Rules Details 


Approval Rule 


If previous bookings more than 


15 


approve discounted rates automatically 


6. Click the Save button to save the changes. 

7. You can verify the rule logic again by carrying out the first scenario of this 
section. 


Section 5. Conclusion 
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In this tutorial, you have seen how Business Space powered by WebSphere is a 
powerful and rich user interface for business process applications. Business Space 
also provides a unified frontend enabling collaboration between the various Business 
Process Management products. Business Spaces are further enhanced with custom 
themes and custom widgets, which provide business users with a customizable 
space suiting their needs. 
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Downloads 


Description 

Name 

Size 

Download 

method 

Code sample 

dWResortVerl .zip 

29KB 

HTTP 


Information about download methods 
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Resources 

• Business Space V7 Information Center 

• IBM Redbook: Building Solutions with Business Space powered by WebSphere 
V7 

• WebSphere Process Server product support 

• WebSphere Process Server discussion forum 
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